<template>
	<view class="flex-column">
		<view class="flex-row">
			<image class="top-image" src="/static/wode/wode_bg.png" mode="widthFix"></image>
			<view class="top-view flex-row">'
				<image class="top-head" :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill"
					@click="onAvatarClick">
				</image>
				<view class="top-right flex-column">
					<view class="top-right-name">{{userInfo.nickname}}</view>
					<!-- <view class="top-right-company">超级无敌建设大集团</view> -->
				</view>

			</view>
		</view>

		<view class="middle flex-row">
			<view class="middle-item flex-column">
				<image class="middle-item-image" src="/static/wode/wdfenxiang.png" mode="heightFix"></image>
				<view class="middle-item-view">我的分享</view>
			</view>
			<view class="middle-item flex-column" @click="favorite_click()">
				<image class="middle-item-image" src="/static/wode/wdshoucang.png" mode="heightFix"></image>
				<view class="middle-item-view">我的收藏</view>
			</view>
			<view class="middle-item flex-column" @click="favorite_circle_click()">
				<image class="middle-item-image" src="/static/wode/wdxinde.png" mode="heightFix"></image>
				<view class="middle-item-view">我的心得</view>
			</view>
			<!-- 			<view class="middle-item flex-column">
				<view class="flex-row">
					<image class="middle-item-image" src="/static/wode/wdpinglun.png" mode="heightFix"></image>
					<un-read content="3"></un-read>
				</view>
				<view class="middle-item-view">我的评论</view>
			</view> -->
		</view>

		<view class="bottom">
			<navigator url="/pages/wode/info/info">
				<view class="bottom-item flex-row">
					<image class="bottom-item-image" src="/static/wode/jibenziliao.png" mode="heightFix"></image>
					<view class="bottom-item-view">基础资料</view>
				</view>
			</navigator>
			<view class="bottom-item flex-row">
				<image class="bottom-item-image" src="/static/wode/wodekecheng.png" mode="heightFix"></image>
				<view class="bottom-item-view">我的课程</view>
			</view>
			<view class="bottom-item flex-row">
				<image class="bottom-item-image" src="/static/wode/wodedingdan.png" mode="heightFix"></image>
				<view class="bottom-item-view">我的订单</view>
			</view>
			<view class="bottom-item flex-row" @click="goToEnterpriseInfo">
				<image class="bottom-item-image" src="/static/wode/qiyexingxi.png" mode="heightFix"></image>
				<view class="bottom-item-view">企业信息</view>
			</view>
			<navigator url="/pages_mine/enterprise/enterprise_list" v-if="isRoleAdmin()">
				<view class="bottom-item flex-row">
					<image class="bottom-item-image" src="/static/wode/qiyexingxi.png" mode="heightFix"></image>
					<view class="bottom-item-view">企业管理</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js'

	import {
		isRoleAdmin
	} from '@/utils/role.js'

	const userInfo = computed(() => store.userInfo)

	onLoad(() => {
		console.log('我的页面', userInfo.value);
	})

	async function onAvatarClick() {
		if (userInfo.value.avatar == 0) {
			return
		}
		uni.previewImage({
			urls: [userInfo.value.avatar]
		})
	}

	function favorite_click(params) {
		uni.navigateTo({
			url: '/pages/wode/favorite'
		})
	}

	function favorite_circle_click(params) {
		uni.navigateTo({
			url: '/pages/index/beikaoxinde/beikaoxinde?type=' + 1
		})
	}

	function goToEnterpriseInfo() {
		if (userInfo.value.enterprise_id) {
			uni.navigateTo({
				url: '/pages_mine/enterprise/enterprise_info?id=' + store.userInfo.enterprise_id[0]
			})
		} else {
			uni.showToast({
				title: '您还未绑定任何企业，请先绑定企业',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss">
	page {
		background: $me-color-background;
	}
</style>

<style lang="scss" scoped>
	.top-image {
		width: 100%;
	}

	.top-view {
		position: absolute;
		top: 100rpx;
	}

	.top-head {
		width: 120rpx;
		height: 120rpx;
		margin-left: 36rpx;
		border-radius: 60rpx;
		overflow: clip;
	}

	.top-right {
		margin: 10rpx 32rpx;
		display: flex;
		justify-content: center;
	}

	.top-right-name {
		color: white;
		font-size: 38rpx;
	}

	// .top-right-company {
	// 	color: white;
	// 	margin-top: 10rpx;
	// 	font-size: 32rpx;
	// }

	.middle {
		margin-top: 10rpx;
		height: 180rpx;
		background: white;
		justify-content: space-around;
	}

	.middle-item {
		justify-content: center;
		align-items: center;
	}

	.middle-item-image {
		height: 60rpx;
	}

	.middle-item-view {
		margin-top: 16rpx;
		font-size: 20rpx;
	}

	.bottom {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10rpx;
		margin-top: 10rpx;
	}

	.bottom-item {
		background: white;
		justify-content: center;
		align-items: center;
		height: 160rpx;
	}

	.bottom-item-image {
		height: 72rpx;
	}

	.bottom-item-view {
		margin-left: 40rpx;
		font-size: 36rpx;
	}
</style>